<template>
	<view class="custom-tabbar fix flex-center" :class="[{'fill-base b-1px-t':configInfo.tabBar[1].name}]">
		<block v-if="configInfo.tabBar[1].name">
			<view @tap.stop="changeTab(index)" class="flex-center flex-column mt-sm"
				:style="{width: 100/configInfo.tabBar.length + '%'}" v-for="(item,index) in configInfo.tabBar"
				:key="index">
				<image mode="aspectFill" lazy-load class="cover"
					:src="cur == index ? item.selected_img : item.default_img"></image>
				<view class="text" :style="{color:cur == index ? primaryColor : '#666'}">{{item.name}}</view>
			</view>
		</block>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from "vuex"
	export default {
		components: {},
		props: {
			cur: {
				type: String,
				default () {
					return '0'
				}
			},
		},
		data() {
			return {}
		},
		computed: mapState({
			primaryColor: state => state.config.configInfo.primaryColor,
			subColor: state => state.config.configInfo.subColor,
			configInfo: state => state.config.configInfo,
			commonOptions: state => state.user.commonOptions,
		}),
		created() {
			let that = this;
			let sysheight = uni.getSystemInfoSync().windowHeight
			let configInfo = JSON.parse(JSON.stringify(this.configInfo))
			let {
				navBarHeight
			} = configInfo
			const query = uni.createSelectorQuery().in(this);
			query.select('.custom-tabbar').boundingClientRect(data => {
				let curSysHeight = sysheight - data.height - navBarHeight
				configInfo.curSysHeight = curSysHeight
				configInfo.tabbarHeight = data.height
				this.updateConfigItem({
					key: 'configInfo',
					val: configInfo
				})
			}).exec();
		},
		methods: {
			...mapMutations(['updateConfigItem']),
			// 点击跳转
			changeTab(index) {
				this.$emit('change',
					index
				);
			},
		},
	}
</script>

<style scoped lang="scss">
	.custom-tabbar {
		height: 98rpx;
		bottom: 0;
		height: calc(98rpx + env(safe-area-inset-bottom) / 2);
		padding-bottom: calc(env(safe-area-inset-bottom) / 2);

		.cover {
			width: 44rpx;
			height: 44rpx;
		}

		.text {
			font-size: 22rpx;
			margin-top: 5rpx;
			height: 32rpx;
		}
	}
</style>
